<template>
	<div class="error layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<div class="error-flex">
				<div class="left">
					<div class="left-item">
						<div class="left-item-animation left-item-num">404</div>
						<div class="left-item-animation left-item-title">{{ $t('message._system.notFound.foundTitle') }}</div>
						<div class="left-item-animation left-item-msg">{{ $t('message._system.notFound.foundMsg') }}</div>
						<div class="left-item-animation left-item-btn">
							<el-button type="primary" round @click="onGoHome">{{ $t('message._system.notFound.foundBtn') }}</el-button>
						</div>
					</div>
				</div>
				<div class="right">
					<div class="illustration">
						<svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg" class="error-svg">
							<!-- 简约的404插图 -->
							<g class="illustration-group">
								<!-- 主要图形 - 简约的文档图标 -->
								<rect x="150" y="80" width="100" height="120" rx="8" fill="var(--home-bg-light)" stroke="var(--home-border-light)" stroke-width="2" />
								<rect x="160" y="100" width="80" height="4" rx="2" fill="var(--home-border-base)" />
								<rect x="160" y="115" width="60" height="4" rx="2" fill="var(--home-border-base)" />
								<rect x="160" y="130" width="70" height="4" rx="2" fill="var(--home-border-base)" />
								<rect x="160" y="145" width="50" height="4" rx="2" fill="var(--home-border-base)" />

								<!-- 问号 -->
								<circle cx="200" cy="170" r="15" fill="var(--home-primary-lighter)" opacity="0.8" />
								<text x="200" y="178" text-anchor="middle" font-size="20" font-weight="bold" fill="var(--home-primary)">?</text>

								<!-- 装饰性元素 -->
								<circle cx="120" cy="120" r="3" fill="var(--home-primary-light)" opacity="0.6" />
								<circle cx="280" cy="140" r="4" fill="var(--home-success-light)" opacity="0.6" />
								<circle cx="300" cy="100" r="2" fill="var(--home-warning-light)" opacity="0.6" />
							</g>
						</svg>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="notFound">
import { useRouter } from 'vue-router';

// 定义变量内容
const router = useRouter();

// 返回首页
const onGoHome = () => {
	router.push('/');
};
</script>

<style scoped lang="scss">
.error {
	height: 100%;
	min-height: 600px;
	background: var(--next-bg-main-color);
	display: flex;
	align-items: center;
	justify-content: center;

	.error-flex {
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 400px;
		width: 100%;
		max-width: 1000px;
		padding: 0 20px;
		gap: 60px;

		.left {
			flex: 1;
			max-width: 500px;
			height: 100%;
			align-items: center;
			display: flex;

			.left-item {
				width: 100%;

				.left-item-animation {
					opacity: 0;
					animation-name: fadeInUp;
					animation-duration: 0.8s;
					animation-fill-mode: forwards;
					animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
				}

				.left-item-num {
					color: var(--home-primary);
					font-size: 8rem;
					font-weight: 800;
					line-height: 1;
					margin-bottom: 20px;
					background: linear-gradient(135deg, var(--home-primary), var(--home-primary-light));
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					background-clip: text;
					text-shadow: 0 4px 8px rgba(64, 158, 255, 0.2);

					@media (max-width: 768px) {
						font-size: 5rem;
					}
				}

				.left-item-title {
					font-size: 1.8rem;
					font-weight: 600;
					color: var(--home-text-primary);
					margin: 0 0 12px 0;
					animation-delay: 0.2s;
					line-height: 1.3;

					@media (max-width: 768px) {
						font-size: 1.5rem;
					}
				}

				.left-item-msg {
					color: var(--home-text-secondary);
					font-size: 1rem;
					line-height: 1.6;
					margin-bottom: 40px;
					animation-delay: 0.4s;
					max-width: 400px;

					@media (max-width: 768px) {
						font-size: 0.9rem;
						margin-bottom: 30px;
					}
				}

				.left-item-btn {
					animation-delay: 0.6s;

					.el-button {
						height: 48px;
						padding: 0 32px;
						font-size: 16px;
						font-weight: 500;
						border-radius: 24px;
						transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
						box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);

						&:hover {
							transform: translateY(-2px);
							box-shadow: 0 8px 20px rgba(64, 158, 255, 0.4);
						}

						&:active {
							transform: translateY(0);
						}
					}
				}
			}
		}

		.right {
			flex: 1;
			max-width: 400px;
			height: 100%;
			opacity: 0;
			animation-name: fadeInRight;
			animation-duration: 1s;
			animation-delay: 0.3s;
			animation-fill-mode: forwards;
			animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			// 404插图背景
			&::before {
				content: '404';
				position: absolute;
				font-size: 12rem;
				font-weight: 900;
				color: var(--home-bg-light);
				opacity: 0.1;
				z-index: 1;
				animation: float 6s ease-in-out infinite;

				@media (max-width: 768px) {
					font-size: 8rem;
				}
			}

			// 装饰性圆圈
			&::after {
				content: '';
				position: absolute;
				width: 200px;
				height: 200px;
				border: 2px solid var(--home-primary-lighter);
				border-radius: 50%;
				opacity: 0.3;
				animation: pulse 3s ease-in-out infinite;
				z-index: 0;
			}

			.illustration {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 2;
				position: relative;

				.error-svg {
					width: 100%;
					height: auto;
					max-width: 300px;

					.illustration-group {
						animation: float 4s ease-in-out infinite;
					}
				}
			}

			img {
				width: 100%;
				height: auto;
				max-width: 300px;
				z-index: 2;
				position: relative;
			}
		}
	}

	// 响应式设计
	@media (max-width: 992px) {
		.error-flex {
			max-width: 800px;
			gap: 40px;
		}
	}

	@media (max-width: 768px) {
		height: auto;
		min-height: 100vh;
		padding: 40px 0;

		.error-flex {
			flex-direction: column;
			height: auto;
			gap: 40px;
			text-align: center;

			.left {
				order: 2;
				max-width: 100%;

				.left-item {
					.left-item-num {
						margin-bottom: 15px;
					}

					.left-item-title {
						margin-bottom: 10px;
					}

					.left-item-msg {
						margin-bottom: 25px;
					}
				}
			}

			.right {
				order: 1;
				max-width: 250px;
				height: 200px;
				margin: 0 auto;

				&::before {
					font-size: 6rem;
				}

				&::after {
					width: 150px;
					height: 150px;
				}
			}
		}
	}
}

// 动画定义
@keyframes fadeInUp {
	0% {
		opacity: 0;
		transform: translateY(30px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeInRight {
	0% {
		opacity: 0;
		transform: translateX(30px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes float {
	0%,
	100% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-20px);
	}
}

@keyframes pulse {
	0%,
	100% {
		transform: scale(1);
		opacity: 0.3;
	}
	50% {
		transform: scale(1.1);
		opacity: 0.1;
	}
}
</style>
